<template>
	<view class="container">
		<view class="logo-area">
			<image src="https://placehold.co/260x250"></image>
		</view>

		<view class="login-options">

			<button v-if="isAgreed" class="quick-login" :class="{ 'disabled': !isAgreed }" :disabled="!isAgreed"
				open-type="getPhoneNumber" @getphonenumber="handleQuickLogin">
				快捷登录
			</button>
			<button v-else class="quick-login disabled" @click="handleQuickLogin">快捷登录</button>
		</view>

		<view class="skip-login" @click="handleSkipLogin">
			<text>暂不登录</text>
		</view>

		<view class="agreement">
			<radio-group @change="handleAgreementChange">
				<label class="agreement-item">
					<view class="custom-radio" @click="selectItem(1)">
						<view class="radio-icon" :class="{selected: selected === 1}"></view>
					</view>
					<text>我已阅读并同意</text>
					<text class="link" @click="openPrivacyPolicy">《xxx+小程序隐私保护指引》</text>
					<text class="link" @click="openPersonalInfoPolicy">《xxxx个人信息保护政策》</text>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: 0,
				isAgreed: false
			}
		},
		methods: {
			selectItem(value) {
				this.selected = value
				// 当选中协议时，更新isAgreed状态
				this.isAgreed = value === 1
			},
			handleQuickLogin(e) {
				console.log("快速登录", e)
				// 检查是否同意协议
				if (false == this.isAgreed) {
					uni.showToast({
						title: '请先同意用户协议',
						icon: 'none',
						duration: 2000
					})
					return
				}

				console.log("快速登录", e)
				uni.showToast({
					title: '快捷登录',
					icon: 'none'
				})
				// 这里添加快捷登录逻辑
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			handleSkipLogin() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			handleAgreementChange(e) {
				this.isAgreed = e.detail.value === 'agree'
			},
			openPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/login/privacy'
				})
			},
			openPersonalInfoPolicy() {
				uni.navigateTo({
					url: '/pages/login/policy'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	// 自定义单选框
	.custom-radio {
		display: flex;
		align-items: center;
	}

	.radio-icon {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		border: 1px solid #ccc;
		margin-right: 8px;
		position: relative;
	}

	.radio-icon.selected {
		border-color: #f9bf36;
		background-color: #f9bf36;
	}

	.radio-icon.selected::after {
		content: "";
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: white;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		background-color: #ffffff;
		min-height: 100vh;
	}

	.logo-area {
		margin: 100rpx auto;

		image {
			width: 520rpx;
			height: 500rpx;
		}
	}

	.login-options {
		width: 100%;
		margin-top: 100rpx;
	}

	.quick-login {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		font-size: 32rpx;
		margin-bottom: 30rpx;
		background-color: #f9bf36;
		color: white;
		transition: all 0.3s ease;

		&.disabled {
			background-color: #f9bf36;
			color: white;
			// opacity: 0.6;
		}

		&[disabled] {
			// opacity: 0.6;
		}
	}

	.skip-login {
		margin-bottom: 60rpx;

		text {
			font-size: 18rpx;
			color: #999999;
		}
	}

	.agreement {
		display: flex;
		width: 100%;

		.agreement-item {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			text {
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.link {
		font-size: 24rpx;
		color: #1E90FF !important;
		margin: 0 5rpx;
	}
</style>